var map;
var markers = [];
var mapCenter;
var latLongCheck = 0;
var lowerBound;
var upperBound;
var skipRedraw = false;
var maxResults = 50;
var formFields = ['lowPrice', 'highPrice', 'bedRooms','bathRooms','daysOnMarket', 'sqFt', 'acres', 'propTypeSelect'];

// Will hold MarkerClusterer object
var mc = null;
// MarkerClusterer Options
var mcOptions = mcOptions = {
	averageCenter	: true,
	gridSize	: 50,
	maxZoom		: 15//,
	// There are 5 levels (sizes) for clusters available. You can set styling for each one.
	// The 'url' parameter links to cluster icon - you can link an empty image here and style the clusters with CSS
	// Notice 'width' and 'height' parameters - these are important for setting cluster sizes.
	/**
	styles			: [{
		'textColor'	: 'white',
		'width'		: 36,
		'height'	: 36,
		'url'		: 'https://example.com/images/map-marker-1.png',
		'textSize'	: 13,
		'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif'
	},
	{
		'textColor'	: 'white',
		'width'		: 40,
		'height'	: 40,
		'url'		: 'https://example.com/images/map-marker-2.png',
		'textSize'	: 13,
		'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif'
	},
	{
		'textColor'	: 'white',
		'width'		: 44,
		'height'	: 44,
		'url'		: 'https://example.com/images/map-marker-3.png',
		'textSize'	: 13,
		'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif'
	},
	{
		'textColor'	: 'white',
		'width'		: 48,
		'height'	: 48,
		'url'		: 'https://example.com/images/map-marker-4.png',
		'textSize'	: 13,
		'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif'
	},
	{
		'textColor'	: 'white',
		'width'		: 52,
		'height'	: 52,
		'url'		: 'https://example.com/images/map-marker-5.png',
		'textSize'	: 13,
		'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif'
	}
	] */
};

function gatherSearch(){
  var params = '';
  for (var i = 0; i < formFields.length; i++) {
    if (fieldExists($(formFields[i]))) {
      var fieldValue = $(formFields[i]).value;
      var fieldName = $(formFields[i]).name;
      if (fieldValue != '' && fieldValue != null)
        params = params+'&'+fieldName+'='+fieldValue;
    }
  }
  return params;
}
function googleLoad() {
	map = new google.maps.Map(
        document.getElementById('IDX-mapContainer'), {
          center: new google.maps.LatLng(45.9833463, -87.204476 ),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      map.enableKeyDragZoom({
            visualEnabled: true,
            maxZoom : 18,
            visualPosition: google.maps.ControlPosition.LEFT,
            visualPositionOffset: new google.maps.Size(13, 0),
            visualPositionIndex: null,
            visualSprite: "https://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
            visualSize: new google.maps.Size(20, 20),
            visualTips: {
             off: "Turn on",
             on: "Turn off"
            }
         });

    google.maps.event.addListener(map, "click", function (event) {
      var latitude = event.latLng.lat();
      var longitude = event.latLng.lng();
	  //alert(latitude+":"+longitude);
	}); //end addListener



    google.maps.event.addListener(map, "maptypechanged", function () { skipRedraw = true; });

    google.maps.event.addListener(map, "moveend", function() {
	  console.log( 'Moveend' );
      if (skipRedraw == false) {
        var bounds = map.getBounds();
        lowerBound = bounds.getSouthWest();
        upperBound = bounds.getNorthEast();
        loadPins();
      } else skipRedraw = false;
    });

    google.maps.event.addListener(map, "bounds_changed", function() {
      if (skipRedraw == false) {
        var bounds = map.getBounds();
        lowerBound = bounds.getSouthWest();
        upperBound = bounds.getNorthEast();
        //loadPins();
        pausedUpdate();
      } else skipRedraw = false;
    });




    google.maps.event.addListener(map, "infowindowopen", function() {
      var existingSwBounds = boundToCSV(lowerBound);
      var existingNeBounds = boundToCSV(upperBound);
      var bounds = map.getBounds();
      var newSwBounds = boundToCSV(bounds.getSouthWest());
      var newNeBounds = boundToCSV(bounds.getNorthEast());
      if (existingSwBounds != newSwBounds || existingNeBounds != newNeBounds)
        skipRedraw = true;
        map.savePosition();
    });
}
function loadPins() {
  // Call setStatusLoading function that add a loader animation
  setStatusLoading();

  // Calling our new 'clearMarkers' function which will also clear MarkerClusterer markers
  clearMarkers();

  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds =  map.getBounds();
    var upperBound = bounds.getNorthEast();
    var lowerBound = bounds.getSouthWest();
  });
  latLongCheck = lowerBound;
  var url = '../idx/loadMapStart.php';
  var currentZoom = map.getZoom();
  param = 'stp=map&cid=14268&lb='+lowerBound+'&ub='+upperBound+'&zoom='+currentZoom+'&maxPer=50&per=100';
  param = param+gatherSearch();
  var myAjax = new Ajax.Request( url, { method: 'post', parameters: param, onLoading: function(origonalRequest) {
    if (origonalRequest.responseText.length == 0) {
      $('IDX-mapOverlay').innerHTML = "<h1 style=\"color: #FFF; margin-left: 50px;\">&nbsp;</h1>";
      $('IDX-mapOverlay').style.display = 'block';
    }
  }, onComplete: function(origonalRequest) {
    if (200 == origonalRequest.status) {
      var rawData = origonalRequest.responseText.split('|');
      if (isNaN(rawData[0]) == false && rawData[0] > 0) {
        for (var i = 1; i < rawData.length; i++) {
          var splitData = rawData[i].split(",");
          var point = new google.maps.LatLng(splitData[1], splitData[2]);
          //map.addOverlay(createMarker(point, splitData[0], splitData[3], splitData[4], splitData[5]));
          createMarker(point, splitData[0], splitData[3], splitData[4], splitData[5]);
        }

        // Check the 'createMarker' function - we are NOT setting 'map' property for any markers, thus they are not yet added to map. MarkerClusterer will do that for us!
        // If 'mc' is not an object yet...
        if ( mc === null ) {
	      // Instantiate MarkerClusterer - show it the main map, tell it to use our set of markers and a set of options that we've defined at the top
          mc = new MarkerClusterer( map, markers, mcOptions );
        // If 'mc' is already a MarkerClusterer...
        } else {
	      // Just show it a new set of markers
          mc.addMarkers( markers );
        }

        //$('IDX-mapInfo').innerHTML = rawData[0]+' Listings Found. ';
        $('IDX-mapInfo').innerHTML = rawData.length-1+' Listings Found. ';
        if (rawData[0] == maxResults)

          $('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML + 'Maximum results reached, zoom in for more properties.';
        else {
          //$('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML + 'Click a marker for property details.';
          $('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML;
        }
      } else {
        $('IDX-mapInfo').innerHTML = 'No Listings Found';
      }
    } else {
      $('IDX-mapInfo').innerHTML = 'Error getting information.';
    }
    $('IDX-mapOverlay').style.display = 'none';
  }, onSuccess: function () {
    $('IDX-mapOverlay').style.display = 'none';
  }, onFailure: function() {
    $('IDX-mapOverlay').style.display = 'none';
    $('IDX-mapInfo').innerHTML = 'Error getting information.';
  }
  });
  $('IDX-lowerbound').value = lowerBound;
  $('IDX-upperbound').value = upperBound;
  $('IDX-zoomLevel').value = currentZoom;
  $('IDX-mapOverlay').style.display = 'none';
}

function clearOverlays() {
  setAllMap(null);
}

// This function will just update the IDX-mapInfo div with 'loading' message.
function setStatusLoading() {
  $('IDX-mapInfo').innerHTML = '<span class="loading">Loading properties...</span>';
}

// Call this to clear all markers from previous request.
// Sets 'markers' array to empty array and calls 'clearMarkers' method of MarkerClusterer (if it has been instantiated already)
function clearMarkers() {
  if ( mc !== null ) {
    mc.clearMarkers();
  }
  setAllMap( null );
  markers = [];
}


function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

function createMarker(point, number, mlsID, listingType, propType) {









 var marker = new google.maps.Marker({
            position: point,
            icon: "https://maps.google.com/mapfiles/kml/pal3/icon56.png"
            // Notice how we are not designating any map for this marker.
            // Markers will be placed on map by MarkerClusterer a bit later


      });

  markers.push(marker);
  marker.value = number;



  google.maps.event.addListener(marker, "click", function() {
    var myHtml = '';
    var url = '../idx/loadMapStart.php';
    param = 'cid=14268&listingID='+number+'&mlsID='+mlsID+'&listingType='+listingType+'&propType='+propType;
    var oldMessage = $('IDX-mapInfo').innerHTML; $('IDX-mapInfo').innerHTML = '<span class="loading"><strong>Loading property information.</strong> Please wait.</span>';
    var propAjax = new Ajax.Request(
	        url, {
	            method: 'post',
	            parameters: param,
	            onComplete: function (origonalRequest) {
	                    myHtml = origonalRequest.responseText;
	                    var infoWindow = new google.maps.InfoWindow;
	                    var latLng = marker.getPosition();
	                    infoWindow.setContent(myHtml);
	                    infoWindow.open(map, marker);
	                    //marker.openInfoWindowHtml(myHtml);
	                    $('IDX-mapInfo').innerHTML = oldMessage;

	          }
	        }
	      );
	      skipRedraw = true;
  });
  return marker;
}





function boundToCSV(bound) {
  regexp = /[\s\(\)]/g;
  bound = bound+" ";
  return bound.replace(regexp,"");
}

var timerID = 0;
function pausedUpdate() {
  if (timerID == 0) {
    timerID = setTimeout("loadPins()",800);
    return true;
  } else {
    clearTimeout(timerID);
    timerID = setTimeout("loadPins()",800);
    return true;
  }
}

function fieldExists(fieldToTest) {
  if (null == fieldToTest) return false; if ("undefined" == typeof(fieldToTest)) return false; return true; }